<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{include :: header('专辑内容列表')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <div class="invoice p-3">
        <!-- title row -->
        <div class="row">
            <div class="col-12 invoice-info">
                <h4>
                    <i class="fa fa-image"></i> <span th:text="${pictureAlbum.title}"></span>
                    <small class="float-right" th:text="${#strings.replace(pictureAlbum.createTime,'T',' ')}"></small>
                </h4>
            </div>
            <div class="col-12 invoice-info bg-gray-light">
                <label class="col-form-label mr-5">
                    频道：<span class="text-blue" th:text="${channel !=null?channel.channelName:'未知'}"></span>
                </label>
                <label class="col-form-label mr-5">
                    分类：<span class="text-blue" th:text="${pictureAlbum.categoryName}"></span>
                </label>
                <label class="col-form-label">
                    上传者：<span class="text-red" th:text="${pictureAlbum.userName} + '( userId：'+ ${pictureAlbum.userId} + ' )'"></span>
                </label>
            </div>
        </div>
    </div>
    <div class="btn-group" id="toolbar" role="group">
        <a class="btn btn-success" id="btn-picture-upload">
            <i class="fa fa-plus"></i> 上传图片
        </a>
    </div>
    <div class="select-table table-striped">
        <table id="bootstrap-table" class="table-striped"></table>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: bootstrap-table-js}" />
<script th:inline="javascript">
    var prefix = "/picture/album";

    var albumId = [[${pictureAlbum.id}]];

    $(function() {
        var options = {
            url: prefix + "/item/list.json?albumId=" + albumId,
            updateUrl: "/picture/edit.html?id={id}",
            modalName: "图片",
            columns: [
                {
                    field: 'id',
                    title: 'id',
                    width: '80px'
                },
                {
                    field: 'coverUrl',
                    title: '封面',
                    width: '80px',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (value === "" || value == null) {
                            return "<img class='img-circle img-xs' style='height:50px;width:50px' data-target='self' src='/static/logo-big.png'/>"
                        } else {
                            return $.common.sprintf("<img class='img-circle img-xs' height='50' width='50' data-target='self' src='%s'/>", value);
                        }
                    }
                },
                {
                    field: 'title',
                    title: '标题/上传时间',
                    formatter: function (value, row, index) {
                        return row.title + '<br /><small class="text-gray">' + row.createTime + '</small>';
                    }
                },
                {
                    field: 'categoryName',
                    title: '类别',
                    width: '100px',
                    align: 'center'
                },
                {
                    field: 'price',
                    title: '价格',
                    width: '100px',
                    align: 'right',
                    formatter: function (value, row, index) {
                        return (value / 100) + ' 元';
                    }
                },
                {
                    field: 'viewCount',
                    title: '浏览/下载',
                    width: '100px',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return '<span class="text-blue">' + value + '</span><br>' + '<span class="text-red">' + row.downCount + '</span>';
                    }
                },
                {
                    field: 'sort',
                    title: '属性',
                    align: 'center',
                    width: '80px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.isElite === 1) {
                            actions.push('<span class="badge badge-primary">推荐</span>');
                        } else {
                            actions.push('<span class="badge badge-secondary">推荐</span>');
                        }
                        actions.push('<br />');
                        if (row.isTop === 1) {
                            actions.push('<span class="badge badge-danger">固顶</span>');
                        } else {
                            actions.push('<span class="badge badge-secondary">固顶</span>');
                        }
                        return actions.join('');
                    }
                },
                {
                    field: 'status',
                    align: 'center',
                    title: '上架',
                    width: '80px',
                    formatter: function (value, row, index) {
                        return statusTools(row);
                    }
                },
                {
                    title: '操作',
                    align: 'left',
                    width: '180px',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="pictureView(\'' + row.id + '\')"><i class="fa fa-search"></i>详情</a> ');
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="pictureEdit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="itemRemove(\'' + row.id + '\')"><i class="fa fa-remove"></i>移除</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

        //上传图片
        $('#btn-picture-upload').click(function () {
            layer.open({
                type: 2,
                area: ["1055px", "600px"],
                maxmin: false,
                shade: 0.3,
                title: "图片上传",
                content: "/picture/album/item/add.html?albumId=" + albumId,
                shadeClose: true,
                end: function (index, layero) {
                    $.table.search();
                    return false;
                }
            });
        })
    });

    /* 状态显示 */
    function statusTools(row) {
        if (row.status === 1) {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="updateStatus(\'' + row.id + '\',\'' + 0 + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="updateStatus(\'' + row.id + '\',\'' + 1 + '\')"></i> ';
        }
    }

    //上架与下架
    function updateStatus(id, status) {
        table.set();
        var str = "";
        if (status > 0) {
            str = "确定执行上架操作"
        } else {
            str = "确定执行下架操作"
        }
        $.modal.confirm(str, function () {
            var data = {"id": id, "status": status};
            $.operate.submit("/picture/update/status.json", "post", "json", data);
        });
    }

    function itemRemove(id) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/picture/album/item/remove.json",
            data: {"albumId": albumId, "pictureId": id},
            cache: true,
            success: function (result) {
                if (result.code === 0) {
                    $.table.search();
                } else {
                    layer.msg(result.msg, {time: 3000});
                }
            }
        });
    }

    //Edit
    function pictureEdit(id) {
        var index = layer.open({
            title: '编辑图片',
            content:'/picture/edit.html?id='+id,
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['880px', '90%']
        });
    }
    //详情
    function pictureView(id) {
        var index = layer.open({
            title: '图片详情',
            content:'/picture/view.html?id='+id,
            type: 2,
            shade: 0.2,
            maxmin: true,
            shadeClose: true,
            area: ['880px', '90%']
        });
    }
</script>
</body>
</html>